<!DOCTYPE html>
<html>
<head>
	<title>test</title>
</head>
<body>
	<header style="padding: 5px">
		<h2>api测试</h2>
	</header>
	<div></div>
	<div>
		<input type="text" id="request-url" placeholder="请求地址">
		<select id="request-type">
			<option value="GET">GET</option>
			<option value="POST">POST</option>
			<option value="PUT">PUT</option>
			<option value="DELETE">DELETE</option>
			<option value="UPDATE">UPDATE</option>
		</select>
		<button onclick="Apitest.submit()">提交</button>
		<p id="getJwt"></p>
	</div>
	<style type="text/css">
		ul{
			list-style: none;
			margin: 0;
			padding: 10px;
			border: #ccc 1px solid
		}
		ul li{
			border-bottom: #ccc 1px solid;
			padding:10px 0; 
			margin: 0
		}
	</style>
	<div class="form-body">
		<ul id="request-data">
			<li>
				<input type="text" fieldname data-id="1_value" placeholder="字段">|
				<input type="text" id="1_value" placeholder="值">
			</li>
		</ul>
		
	</div>
	<button onclick="Apitest.addfield()">添加项目</button>
	<div>返回结果:</div>
	<div id="result" style="border: 1px solid #cacaca;
    padding: 5px;">
		
	</div>
	<script id="fieldtmp" type="text/html">
		<li>
			<input type="text" fieldname data-id="{{i}}_value" placeholder="字段">|
			<input type="text" id="{{i}}_value" placeholder="值">
		</li>
	</script>
	<script src="/component/jquery.min.js"></script>
	<script type="text/javascript">
		function tmpRender(id,data){
			var tmp = $(id).html();
			for(i in data){
				console.log(i)
				var reg = new RegExp("{{"+i+"}}", "g" )
				tmp = tmp.replace(reg, data[i]);
			}
			console.log(tmp);
			return tmp;
		}
		var Apitest = {};
		Apitest.access_token= '';//权限token
		Apitest.refresh_token= '';//更新用的token
		Apitest.method = 'GET';
		Apitest.xtype = {
			"GET":"GET",
			"POST":"POST",
			"PUT":"POST",
			"DELETE":"POST",
			"UPDATE":"POST"
		};
		Apitest.data = {};
		Apitest.url = '';
		Apitest.headers = {};
		Apitest.autoindex = 1;
		Apitest.addfield = function(){
			this.autoindex++;
			var tmp = tmpRender('#fieldtmp',{"i":Apitest.autoindex});
			$('#request-data').append(tmp);
		}
		Apitest.submit = function(){
			this.method = $('#request-type').val();
			this.dataset();
			this.url = $('#request-url').val();

			//获取一个jwt
			$.ajax({
			    beforeSend: function(xhr) {
			    	
			        xhr.setRequestHeader('X-HTTP-Method-Override',Apitest.method);
			        xhr.setRequestHeader('X-HTTP-Url-Override',Apitest.url);

			    },
			    type: Apitest.getmethod(),
			    url: '/apitest/test',
			    data:Apitest.data,
			    contentType: "application/json",
			   // dataType:'json',
			    success: function(res){
			        $('#result').html(res);
			    }
			});
		}
		Apitest.getmethod = function(){
			for(var i in Apitest.xtype){
				if(i == Apitest.method){
					return Apitest.xtype[i];
				}
			}
		}
		Apitest.dataset = function(){
			var finputs = $('input[fieldname]');
			var dataid = '';
			var fields = {};
			for(var i=0;i<finputs.length;i++){
				dataid = $(finputs[i]).attr('data-id')
				field = $(finputs[i]).val();
				fieldval = $('#'+dataid).val();
				fields[field] = fieldval;

			}
			console.log(fields);
			this.data = fields;
		}
	</script>
</body>
</html>